<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices){
    console.log('mediaDevices is not supported! please change ur browser ~');
  }else {

    const ePromise = navigator.mediaDevices.enumerateDevices();
    console.log('navigator.mediaDevices.enumerateDevices返回结果:', ePromise);

    navigator.mediaDevices.enumerateDevices()
      .then(gotDevices)
      .catch(handleError)
  }

  function gotDevices(deviceInfos) {
    deviceInfos.forEach(deviceInfo=>{
      // console.log('deviceInfo:',deviceInfo);
      console.log('deviceInfo.kind:',deviceInfo.kind);
      console.log('deviceInfo.groupId:',deviceInfo.groupId);

      //todo 注意 http 下不会显示 label 和 deviceID, 只有在https下才会(← 在当前版本下 即使是https 在getUserMedia调用之前也不能获取到具体的值)
      //emmm 目前 即2021.3 的浏览器中 在 getUserMedia 之前, deviceId 和 label 会一直为空
      //https://stackoverflow.com/questions/65356567/webrtc-mediadevices-enumeratedevices-returns-empty-deviceid
      //It returns empty deviceIds now ahead of getUserMedia because tracking libraries were (and still are) calling enumerateDevices en masse to fingerprint people, with no intention of ever asking for camera or microphone.
      console.log('deviceInfo.deviceId:',deviceInfo.deviceId);
      console.log('deviceInfo.label:',deviceInfo.label);
    })
  }

  function handleError(err) {
    console.log('err:',err);
  }

</script>
</body>
</html>
